<template>
    <van-nav-bar left-arrow @click-left="onClickLeft" fixed placeholder>
        <template #title>
            <p>我的收藏</p>
        </template>
        <template #right>
            <button @click="bindSwitch">{{ state ? '完成' : '管理' }}</button>
        </template>
    </van-nav-bar>
    <van-swipe-cell v-for="item in CollectionStore.collectionList">
        <van-card  :price="item.price" :title="item.product" @click="bindJump(item.id)">
            <template #thumb>
                <van-checkbox
                    v-if="state"
                    :checked="item.state"
                    @click="CollectionStore.singleCheck(item.id)"
                ></van-checkbox>
                <img :src="item.picture" alt="" v-if="state" class="imgOne" />
                <img :src="item.picture" alt="" v-if="!state" class="imgTwo" />
            </template>
            <template #footer>
                <van-button v-if="state" size="mini">去店铺</van-button>
                <van-button v-if="state" size="mini">找相似</van-button>
            </template>
        </van-card>
        <template #right v-if="!state">
            <van-button
                square
                text="删除"
                type="danger"
                class="delete-button"
                @click="CollectionStore.deleteGoods(item.id)"
            />
        </template>
    </van-swipe-cell>
    <van-action-bar v-if="state" placeholder>
        <van-checkbox
            :checked="CollectionStore.stateAll"
            @click="CollectionStore.checkAll"
            >全选</van-checkbox
        >
        <van-button @click="CollectionStore.deleteChoose(state)">删除</van-button>
    </van-action-bar>
</template>

<script setup lang="ts">
import { useColleciton } from '../hooks/Collection'

const { onClickLeft, bindSwitch, state, CollectionStore, bindJump,} =
    useColleciton()
</script>

<style lang="scss" scoped>
:deep(.van-icon-arrow-left)::before {
    color: #1b1a1a;
}
.van-nav-bar {
    .van-icon {
        color: #1b1a1a;
    }
   button:nth-child(1){
    height: 100%;
    line-height: 50px;
   }
    button {
        background-color: transparent;
        border: 0px solid;
    }
    
}
.van-swipe-cell {
    .van-card {
        background-color: transparent;

        :deep(.van-card__title) {
            font-weight: 600;
            font-size: 15px;
        }
        :deep(.van-card__thumb) {
            width: 125px;
            display: flex;
            .imgOne {
                width: 80%;
                height: 100px;
                margin-left: 5px;
            }
            .imgTwo {
                width: 80%;
                height: 100px;
                margin-left: 20px;
            }
        }

        :deep(.van-card__content) {
            margin: 5px 0px 0px;
        }
        :deep(.van-card__price) {
            color: red;
            span:nth-child(1) {
                font-size: 20px;
            }
            span:nth-child(2) {
                font-size: 20px;
            }
            span:nth-child(3) {
                font-size: 15px;
            }
        }
        .van-button {
            border-radius: 27px;
            font-size: 10px;
            padding: 10px;
            color: #d1cfcf;
        }
    }
    .delete-button {
        height: 100%;
    }
}

.van-action-bar {
    border-top: 1px solid #ece9e9;
    .van-checkbox {
        margin-left: 10px;
        font-size: 10px;

        :deep(span) {
            color: #999;
        }
    }
    .van-button {
        border: 1px solid orange;
        color: orange;
        height: 30px;
        width: 70px;
        border-radius: 30px;
        margin-left: 200px;
    }
}
</style>
